<!--
 * @Author: chenhuanhuan 2925102113@qq.com
 * @Date: 2024-12-12 14:13:45
 * @LastEditors: wuheng wuheng@szhbzc.com
 * @LastEditTime: 2025-03-08 16:25:14
 * @FilePath: \hbzc-groupmeal-center-web\src\centerViews\basicInformation\spuManage\spuCategory\index.vue
-->
<template>
  <div class="app-container flex">
    <pb-card height="100%" width="100%" padding="0">
      <div class="flex h-100%">
        <div class="left-tree-box">
          <pb-tree @nodeClick="nodeClick" :treeData="spuTreeData" :defaultProps="treeProps"></pb-tree>
        </div>
        <div class="table-right">
          <pb-table :column="spuColumn" :tableData="spuTableData" :bottomElement="['pb-page']">

          </pb-table>
          <pb-pagination v-model:currentPage="pages.currentPage" v-model:pageSize="pages.pageSize"
            @onChange="onPagesChange" :total="pages.total"></pb-pagination>
        </div>
      </div>
    </pb-card>
  </div>
</template>

<script setup lang="ts">
import { getSpuClassList } from "@/api/Spu";
import { getSpuClassTreeApi } from "@/utils/globalFn";
import { useRouter } from "vue-router";
const router = useRouter();

const pageInit = () => ({
  total: 0,
  currentPage: 1,
  pageSize: 15,
});
const pages = ref(pageInit());
const onPagesChange = () => {
  getSpuClassListApi();
};


const spuTableData = ref([]);
const spuColumn = reactive([
  {
    key: "spuClassCode",
    width: 100,
    name: "类别编号",
    align: 'right',
  },
  {
    key: "spuClassName",
    width: 120,
    name: "类别名称",
  },
  {
    key: "parentClassName",
    width: 120,
    name: "父级类别",
  },
  {
    key: "createTime",
    name: "创建时间",
    align: 'right',
  },
  {
    key: "spuClassDesc",
    name: "备注",
  },
  // {
  //   slot: "operate",
  //   name: "操作",
  // },
]);

let spuTreeData = ref([]);
const treeProps = { children: "children", label: "spuClassName" };

// 获取列表
const getSpuClassListApi = () => {
  return new Promise<void>((resolve, reject) => {
    let { currentPage, pageSize } = { ...pages.value };
    let params = {
      currentPage,
      pageSize,
      parentClassCode: nodeCode.value,
    };
    getSpuClassList(params).then((res) => {
      if (res.code == 2000) {
        spuTableData.value = res.data.records;
        pages.value.total = res.data.total;
      }
    });
  });
};



// 选择节点
const nodeCode = ref("");
const nodeClick = (data) => {
  nodeCode.value = data.curNode.spuClassCode;
  getSpuClassListApi();
};

const onInit = () => {
  getSpuClassTreeApi().then((res) => {

    let children = res
    recursiveFn(children)
    spuTreeData.value = [
      {
        spuClassName: '全部',
        children: children
      }
    ];
    getSpuClassListApi();


  });
}

const recursiveFn = (data) => {
  data.forEach(el => {
    if (el.spuClassLevel != 1) {
      el.disabled = true
    }
    if (el.children.length) {
      recursiveFn(el.children)
    }
  });
}

onMounted(() => {
  onInit()
});
</script>

<style lang="scss" scoped>
.table-right {
  width: 84%;
  padding: 16px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
}
</style>
